<template>
    <div>
        <van-pull-refresh 
            v-model="loading" 
            :head-height="80" 
            @refresh="onRefresh" 
            success-text="刷新成功"
        >
            <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
            <template #pulling="props">
                <img class="doge" src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
                    :style="{ transform: `scale(${props.distance / 80})` }" />
            </template>

            <!-- 释放提示 -->
            <template #loosing>
                <img class="doge" src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png" />
            </template>

            <!-- 加载提示 -->
            <template #loading>
                <img class="doge" src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"/>
            </template>

            <!-- banner -->
            <div class="g-swiper">
                <van-swipe 
                    class="my-swipe" 
                    :autoplay="3000" 
                    indicator-color="rgb(243, 214, 154)"
                >
                    <van-swipe-item v-for="item in bannerList" :key="item.id">
                        <img :src="item.url" alt="item" style="width:100%;height: 540px;">
                    </van-swipe-item>
                </van-swipe>
                <div class="label">
                    <div class="prompt">
                        <van-icon name="free-postage"> 99包邮</van-icon>
                        <van-icon name="replay"> 7天无理由退换</van-icon>
                        <van-icon name="certificate"> 正品保证</van-icon>
                        <van-icon name="info-o"> 购物须知</van-icon>
                    </div>
                    <HeaderSearch></HeaderSearch>
                </div>
            </div>

            <!-- hot -->
            <div class="g-hot">
                <van-grid column-num="5" icon-size="35" clickable :border="false">
                    <van-grid-item v-for="item in hotList" :key="item.id" :icon="item.url" :text="item.text" />
                </van-grid>
            </div>

            <!-- productList -->
            <div class="g-product-list">
                <van-cell-group>
                    <van-cell title="11·11 秒杀" />
                </van-cell-group>
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="m-box" v-for="(item, index) in productList" :key="item.id" @click="onDetail(item.id)">
                        <img :src="item.picture" alt="logo" />
                        <div class="m-right">
                            <p>￥{{ item.price }}</p>
                            <p>{{ item.product }}</p>
                        </div>
                    </div> 
                </van-list>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script setup lang="ts">
import { useBanner, useProductList, useProductDetail, useHotProduct } from '@/hooks/home'
import HeaderSearch from '@/components/HeaderSearch.vue'
const { bannerList } = useBanner()
const { onRefresh, onLoad, productList, loading, finished } = useProductList()
const { onDetail } = useProductDetail()
const { hotList } = useHotProduct()

</script>

<style lang="scss" scoped>
.doge {
    width: 120px;
    height: 62px;
    margin: 8px;
    border-radius: 4px;
}
.g-swiper {
    .label {
        height: 80px;
        background-color: rgb(243, 214, 154);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-top: -4px;
        padding-top: 8px;
    
        .prompt {
            width: 100%;
            font-size: 12px;
            color: #333;
            display: flex;
            justify-content: space-around;
        }
    }
}
.g-product-list {
    .van-cell {
        font-size: 26px;
        font-weight: 600;
        color: red;
        border-left: 4px solid red;
        margin-left: 12px;
    }
    .van-list {
        width: 100%;
        display: flex;
        justify-content:space-evenly;
        flex-wrap: wrap;
        .m-box {
            width: 47%;
            background-color: rgb(247,248,250);
            margin: 6px 0;
            display: flex;
            flex-direction: column;
            border-radius: 20px;
            border: 1px solid #ddd;
            img {
                width: 95%;
                // height: 95%;
                border-radius: 20px;
                margin: 6px auto;
                margin-bottom: 20px;
            }
            .m-right {
                color: #333;
                p:first-child {
                    font-size: 24px;
                    color: red;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
